<template>
  <div>
    <transition name="move-right">
      <div v-show="leftDrawer" class="left-drawer">
        <div class="left-top fx-r">
          <div class="label">详情数据</div>
          <div class="fx-g1"></div>
          <div style="margin-right: 10px"></div>
          <div class="left-close" @click="leftDrawer = false">
            <i style="font-size: 24px" class="el-icon-circle-close"></i>
          </div>
        </div>

        <div class="info-body">
          <div class="app-title">基本信息</div>
          <div class="info-item">
            <div class="sider-img">
              <el-image
                :src="data.img"
                fit="contain"
                style="width: 100%; height: 120px"
              />
            </div>
            <div class="item fx-r">
              <div class="label">单位信息：</div>
              <div class="value">{{ data.bumen }}</div>
            </div>

            <div class="item fx-r">
              <div class="label">单位信息：</div>
              <div class="value">{{ data.bumen_unit }}</div>
            </div>
          </div>
          <div class="app-title">评价信息</div>
          <div class="info-item">
            <div class="item fx-r">
              <div class="label">电话：</div>
              <div class="value">{{ data.mobile }}</div>
            </div>

            <div class="item fx-r">
              <div class="label">评价：</div>
              <div class="value">{{ data.type == 1 ? '满意' : '不满意' }}</div>
            </div>

            <div class="item">
              <div class="label">评价意见：</div>
              <div class="value-text">
                {{ data.mono }}
              </div>
            </div>

            <div class="item fx-r fx-bc" v-if="data.is_audio == 1">
              <div class="label">语音录音</div>
              <div class="item-l2 fx-r fx-bc" @click="tapPlay()">
                <img
                  v-if="!isPlay"
                  src="../../../../assets/img/yyy.png"
                  style="width: 15px; height: 15px"
                />
                <img
                  v-if="isPlay"
                  src="../../../../assets/img/yyy.gif"
                  style="width: 15px; height: 15px"
                />
                <span>{{ $utils.getDuration(data.duration || 0) }}秒</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </transition>
    <div
      class="left-drawer-bg"
      @click="leftDrawer = false"
      v-show="leftDrawer"
    ></div>
    <audio
      id="resource"
      ref="up"
      :src="audioSrc"
      controls
      style="display: none"
    ></audio>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { SysteCommentItem } from '../../../../api/system/comment'
export default {
  name: 'comment-index-info',
  data() {
    return {
      id: 0,
      leftDrawer: false,
      isFirst: true,
      isPlay: false,
      audioSrc: '',
      data: {},
    }
  },
  //创建页面
  created() {},
  //页面初始化成功
  mounted() {},
  //页面销毁
  unmounted() {},
  methods: {
    open: function (id) {
      this.id = id
      this.isFirst = false
      this.leftDrawer = true
      this.audioSrc = ''
      // this.isFirst = true;
      this.$utils.loading(this, '获取数据中...')
      SysteCommentItem({
        id: id,
      })
        .then((res) => {
          this.$utils.loadingClose()
          if (res.code == 200) {
            this.data = res.data
            document
              .getElementById('resource')
              .addEventListener('ended', () => {
                this.isPlay = false
              })
            this.audioSrc = this.data.audio_path
            this.$refs.up.play()
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch((err) => {
          this.$utils.loadingClose()
          this.$message.error('网络繁忙，加载失败，请稍等片刻在尝试!')
        })
    },

    tapPlay: function () {
      this.isPlay = !this.isPlay
      var dom = this.$refs.up
      dom.play()
    },
  },
}
</script>

<style lang="less" scoped>
.left-drawer-bg {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
}
.left-drawer {
  position: fixed;
  top: 65px;
  background: #f1f1f1;
  width: 450px;
  height: ~'calc(100% - 80px)';
  overflow-y: auto;
  right: 0;
  z-index: 99;
  border-left: 1px solid #fff;
  .left-top {
    padding: 20px;
    border-bottom: 1px solid #fff;
    .label {
      font-size: 16px;
      color: #333333;
      font-weight: bold;
    }
    .top-btn {
      font-size: 14px;
      margin-left: 10px;
      color: #2d8cf0;
    }
    .size {
      font-size: 14px;
    }
    .left-close {
      cursor: pointer;
      &:hover {
        opacity: 0.5;
      }
    }
  }

  .info-body {
    padding: 20px;
  }
}

.info-body {
  .app-title {
    padding: 20px 0;
  }
  .info-item {
    background: #fff;
    border-radius: 10px;
    padding: 10px;
    .sider-img {
      border-radius: 10px;
    }
    .item {
      padding: 10px 0;
      border-bottom: 1px solid #f1f1f1;
      &:last-child {
        border-bottom: 0;
      }
      .label {
        width: 100px;
      }
      .value-text {
        padding: 10px;
      }
    }
  }
}

.item-l2 {
  background: #95e0e6;
  height: 30px;
  width: 100px;
  border-radius: 4px;
  cursor: pointer;
  padding: 0px 10px;
}
</style>
